<template>
  <div id="my-info">
      <van-cell-group class="user-info" v-if="user">
        <van-cell
          center
          class="base-info"
          :border="false"
        >
            <van-image
              slot="icon"
              fit="cover"
              class="avatar"
              round
              :src="currentUserInfo.photo ? currentUserInfo.photo: 'https://img01.yzcdn.cn/vant/cat.jpeg'"
            >
            </van-image>
           <div slot="title" class="name">{{currentUserInfo.name}}</div>
           <van-button size="small" class="updata-btn" to='/user-profile'>编辑资料</van-button>
        </van-cell>
        <van-grid
           :border="false"
           class="data-info"
        >
            <van-grid-item class="data-info-item">
                <div slot='text'>
                     <p class="num-item">{{currentUserInfo.art_count}}</p>
                     <p class="txt-item">头条</p>
                </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
                <div slot='text'>
                     <p class="num-item">{{follow}}</p>
                     <p class="txt-item">关注</p>
                </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
                <div slot='text'>
                     <p class="num-item">{{currentUserInfo.fans_count}}</p>
                     <p class="txt-item">粉丝</p>
                </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
                <div slot='text'>
                     <p class="num-item">{{likeCount}}</p>
                     <p class="txt-item">获赞</p>
                </div>
            </van-grid-item>
        </van-grid>
      </van-cell-group>
      <!-- @click="$router.push({
        name:'login',
          //传递查询参数，查询参数会以?作为分隔符放到url后面
          query:{
            redirect:'/my'
          }
        })" -->
      <div class="unlogin-info" v-else @click="$router.push('/login')">
          <img src="~@/assets/sj.png" alt="">
          <p>登录 / 注册</p>
      </div>
      <van-grid :column-num="2" class="nav-grid mb-4">
          <van-grid-item icon-prefix="toutiao" class="nav-grid-item" icon="shoucang" text="收 藏" />
          <van-grid-item icon-prefix="toutiao" class="nav-grid-item" icon="lishi" text="历 史" />
      </van-grid>
      <van-cell title="消息通知" is-link url="/" />
      <van-cell title="小智同学" class="mb-4" is-link to="/user-chat" />
      <van-cell title="退出登录" v-if="user" class="logout" @click="unLoginOut"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user.js'
export default {
  name: 'my',
  components: {},
  data(){
    return {
      currentUserInfo:{}//当前登录用户信息
    }
  },
  directives: {  },
  computed:{
    ...mapState(['user']),
    likeCount(){
      return this.currentUserInfo.like_count<0 ? 0 : this.currentUserInfo.like_count
    },
    follow(){
      return this.currentUserInfo.follow_count<0 ? 0:this.currentUserInfo.follow_count
    }
  },
  created() {
    //初始化的时候获取数据
    this.loadCurrentUser()
  },
  methods: {
     //退出登录
     unLoginOut(){
        this.$dialog.confirm({
            title: '退出提示',
            message: '确认退出吗？'
        })
        .then(() => {
           //确认执行这里
           //1.清除用户登录状态
           this.$store.commit('setUser',null)
        })
        .catch(() => {
          //取消执行这里

        });
     },
     //获取当前用户的信息
     async loadCurrentUser(){
         const { data }=await getUserInfo()
         this.currentUserInfo=data.data
     }
  },
};
</script>

<style lang="less" scoped>
.user-info{
  width:100%;
  background: url('~@/assets/bg.png') no-repeat;
  background-size:cover;
  .base-info{
    background-color: unset;
    height: 115px;
    box-sizing: border-box;
    padding:38px 20px 11px;
    .avatar{
      box-sizing: border-box;
      width:66px;
      height:66px;
      border:1px solid #fff;
      margin-right: 11px;
    }
    .name{
      font-size: 15px;
      color: #fff;
    }
    .updata-btn{
      height:26px;
      border-radius: 10px;
      font-size: 10px;
      color: #666;
    }
  }
 /deep/ .van-grid-item__content{
      background-color: unset;
  }
}
.data-info{
     .data-info-item{
        height: 65px;
        color:#fff;
      .num-item{
        font-size: 18px;
        text-align: center;
      }
      .txt-item{
        font-size:11px;
        text-align: center;
      }
   }
}
.nav-grid{
  .nav-grid-item{
     height: 70px;
    /deep/ .toutiao{
       font-size:22px;
     }
     /deep/ .toutiao-shoucang{
       color:#eb5253;
     }
     /deep/ .toutiao-lishi{
       color:#ff9d1d;
     }
     .van-grid-item__text{
       font-size:14px;
       color: #333;
     }
  }
}
.logout{
  text-align: center;
  color:#d86262;
}
.mb-4{
  margin-bottom: 4px;
}

.unlogin-info{
  height: 180px;
  background: url('~@/assets/bg.png') no-repeat;
  background-size:cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img{
     display: block;
     border-radius: 50%;
     width:66px;
     height: 66px;
  }
  p{
    font-size: 14px;
    color:#fff;
    text-align: center;
    margin-top: 7px;
  }
}
/deep/.van-image__error{
  img{
    width: 100%;
    height: 100%;
  }
}
</style>
